<template>
  <el-dialog :visible="isShowDialog" :title="title" center @close="btnCancel">
    <el-form ref="clientFrom" :model="formdata" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="经纪">
        <el-select v-model="formdata.agent">
          <el-option
            v-for="(item,index) in agentList"
            :key="index"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="formdata.name" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formdata.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formdata.phone" />
      </el-form-item>

      <el-form-item label="微信" prop="wechat">
        <el-input v-model="formdata.wechat" />
      </el-form-item>

      <el-form-item label="描述" prop="desc">
        <el-input v-model="formdata.desc" />
      </el-form-item>

      <el-form-item label="封面">
        <ImageUpload ref="image" :image="image" />
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-row>
    </template>

  </el-dialog>

</template>

<script>
import { getAgent, addClient, editClient } from '@/api/clientele'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    image: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    // /\w+@[a-z0-9]+\.[a-z]{2,4}/
    const checkEmail = (rule, val, callback) => {
      const re = /\w+@[a-z0-9]+\.[a-z]{2,4}/
      if (re.test(this.formdata.email)) {
        callback()
      } else {
        callback(new Error('邮箱格式不正确'))
      }
    }
    return {
      agentList: [],
      formdata: {
      },
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '请填写描述', trigger: 'blur' }],
        email: [{ required: true, message: '请填写邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确手机号', trigger: 'blur' }],
        wechat: [{ required: true, message: '微信号不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/, message: '输入内容不合法', trigger: 'blur' }]
      }
    }
  },

  created() {
    this.getAgent()
  },
  methods: {
    async getAgent() {
      const { data } = await getAgent()
      const res = data.map(item => {
        return { id: item.id, name: item.name }
      })
      this.agentList = res
    },
    async btnOk() {
      console.log(105, this.formdata.agent)
      await this.$refs.clientFrom.validate()
      // console.log(95, this.$refs.image.fileList[0].url)
      const fileList = this.$refs.image.fileList
      console.log(108, this.formdata.id)
      if (typeof (this.formdata.agent) !== 'number') {
        this.$message.warning('请选择经纪人')
        console.log(112, typeof (this.formdata.agent))
        return
      }
      if (this.formdata.id) {
        await editClient({
          ...this.formdata,
          image: fileList[0] ? fileList[0].url : ''
        })
      } else {
        await addClient({
          ...this.formdata,
          image: fileList[0] ? fileList[0].url : ''
        })
      }
      this.$message.success('操作成功')
      this.$refs.image.fileList = []
      this.formdata = {}
      this.$emit('update:isShowDialog', false)
      this.$emit('addClient')
    },
    btnCancel() {
      this.$refs.clientFrom.resetFields()
      this.$refs.image.fileList = []
      this.formdata = {}
      this.$emit('update:isShowDialog', false)
    }
  }
}
</script>

<style>

</style>
